<template>
    <div style="height: 100%;">
        <div id="yichangtrendChart" style="width: 100%;height: 100%;"></div>
    </div>
</template>
<script>

import echarts from 'echarts'
import homeService from "../../../../services/homeService"

export default {

	data(){
		return {
			month: 1
		}
	},

	mounted(){
		this.initData()
	},

	methods: {

		drawYiChangChart(){
			// 基于准备好的dom，初始化echarts实例
			let yichangtrendChart = echarts.init(document.getElementById('yichangtrendChart'), 'dark')

			// window.onresize = yichangtrendChart.resize;
      window.addEventListener("resize", () => { yichangtrendChart.resize();});

			// 绘制图表
			let option = {
				tooltip: {
					// 悬浮提示
					trigger: "axis",
					backgroundColor: "rgba(229,233,242,0.5)",
					textStyle: {
						color: ""
					},
					borderRadius: 3, //边框圆角
					boxShadow: "0px 2px 10px 0px rgba(229,233,242,1)"
				},
				backgroundColor:'',
				xAxis: {
						type: 'category',
						data: this.time
				},
				yAxis: {
						type: 'value',
						name:'异常设备（个）'
				},
				series: [{
						data: this.data,
						type: 'line',
						smooth: true
				}]
			};
			yichangtrendChart.setOption(option);

    },

		initData(){
      let _this = this

      //初始化
      homeService.yichangtrend({month: this.month}).then(res => {
				
        if (res.code == 0) {
          _this.time = []
          _this.data = []
          res.data.map(item => {
            _this.time.push(item.date)
            _this.data.push(item.faultCount)
          })
          _this.drawYiChangChart()
        }
      })
    },
	}
}
</script>
<style lang="scss" scoped>

</style>
